<template>
    <div class="about-content">
        <div class="about-header">
            <div class="about-header-content">
                <div class="w1200">
                    <div class="about-title">
                        追求卓越 让客户满意
                    </div>
                    <div class="about-desc">遵循专业、专注、精益求精的高标准要求，为客户提供专业的驾培行业解决方案</div>
                </div>
            </div>
        </div>
        <div class="about-us">
            <div class="w1200 flex">
                <img src="https://image.lutongjiakao.com/system/58a5c9c013f14a3b978058202c0c7591.png" alt="">
                <div>
                    <div class="title">关于我们</div>
                    <div class="about-us-line"></div>
                    <div class="about-us-desc">
                        <p>
                            武汉绿通云网络科技有限公司成立于2025年，专注于驾培行业数字化解决方案系统的研发，自主研发的绿通云智慧驾校Saas平台，拥有完善的一站式驾培数字化营销生态系统，为全渠道、全行业的驾校提供专业的驾培数字化解决方案。
                        </p>
                        <p>
                            2025年，绿通云以驾培行业数字化转型为契机切入市场，一举成为行业内的驾培数字化管理系统前几名，深受多个知名驾校的一致好评。经过短短一年时间的发展，公司已获得国家高新技术企业认证、多项软件著作权，拥有自己一套独立的技术产权。公司拥有一支专业的20余名技术团队，致力于为驾培行业转型数字化管理解决方案贡献出一份价值。
                        </p>
                        <p>
                            绿通云深耕驾培行业，始终走在行业前端，持续赋能驾培数字化转型解决方案，为客户提供智能、优质、高端的驾培服务而不断努力。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="honors">
            <div class="w1200">
                <div class="honors-title">
                    服务理念
                </div>
                <div class="honors-steps">
                    <div v-for="(item, index) in honorsList" :key="index" class="honors-item">
                        <!-- <img :src="item.icon" alt=""> -->
                        <div class="concept">{{ item.title }}</div>
                        <div class="honors-desc">{{ item.desc }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contactUs">
            <div class="w1200">
                <div class="honors-title">
                    联系我们
                </div>
                <div class="list-wrapper">
                    <div class="list-item">
                        <div class="box-left">
                            <img src="https://image.lutongjiakao.com/system/a97af6df41eb42dcb0c0a712b4cd7dbb.jpg"
                                alt="">
                        </div>
                        <div class="box-right">
                            <div class="contact-title">公司地址</div>
                            <div class="contact-desc">湖北省武汉市洪山区和平大道1276号锐创中心3楼311室</div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="box-left">
                            <img src="https://image.lutongjiakao.com/system/2ae64b5c15b448578a07834ea98258b4.jpg"
                                alt="">
                        </div>
                        <div class="box-right">
                            <div class="contact-title">咨询电话</div>
                            <div class="contact-desc">134-7688-3427（张经理）</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const honorsList = ref([
    {
        title: '客户至上的服务态度',
        icon: 'https://image.lutongjiakao.com/system/b33afb942118481bb6af42a6a8a9955d.jpg',
        desc: '坚持客户满意为第一服务标准，致力于满足不同场景下的客户需求，坚持自利则生，利他则久'
    },
    {
        title: '精益求精的产品标准',
        icon: 'https://image.lutongjiakao.com/system/b33afb942118481bb6af42a6a8a9955d.jpg',
        desc: '用与时俱进的理念持续打磨产品，始终以研发一套功能强劲、体验良好，易用好用的产品为研发理念'
    },
    {
        title: '稳定安全的使用体验',
        icon: 'https://image.lutongjiakao.com/system/b33afb942118481bb6af42a6a8a9955d.jpg',
        desc: '始终坚持用严苛的技术标准打造软件品牌价值，致力于为客户提供安全、稳定、流畅的使用体验'
    }])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.about-header {
    height: rem(360);
    background-image: url('https://image.lutongjiakao.com/system/b239acd541dd4ad1b3569d47d8080432.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: rem(50);
}

.about-header-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-title {
    font-size: rem(36);
    color: #fff;
    font-weight: bold;
    margin-bottom: rem(10);
}

.about-desc {
    font-size: rem(14);
    font-weight: 500;
    margin-bottom: rem(10);
    color: #fff;
}

.about-us {
    padding: rem(80) 0 rem(90);

    img {
        width: rem(409.5);
        height: rem(240);
        border-radius: rem(12);
        margin-right: rem(50);
    }

    .title {
        font-weight: 800;
        font-size: rem(35);
        color: #111;
    }

    .about-us-line {
        content: "";
        display: block;
        width: 26px;
        color: rgb(89, 89, 89);
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        height: 4px;
        background: rgb(17, 200, 113);
        border-radius: 90px;
        margin-top: 13px;
        margin-bottom: 20px;
    }

    .about-us-desc {
        display: flex;
        flex-direction: column;
        color: rgb(89, 89, 89);
        font-weight: 400;
        font-size: rem(11);
        line-height: 22px;
        gap: 20px;
    }
}

.honors {
    padding: rem(80) 0 rem(90);
    background-image: url('https://image.lutongjiakao.com/system/2ce90aa7c8d148c08b918ced30f39063.jpg');
    background-repeat: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    background-position: center center;
    min-width: 1200px;
    background-size: cover !important;

    .honors-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: rem(25);

        .honors-item {
            background-color: #fff;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: rem(30) rem(35);
            gap: rem(10);

            .concept {
                font-size: rem(14);
                font-weight: bold;
                color: #000;
            }

            img {
                width: 56px;
                height: 56px;
            }

            .honors-desc {
                font-size: rem(11);
                color: rgb(89, 89, 89);
            }
        }
    }
}

.honors-title {
    font-weight: 800;
    font-size: rem(35);
    color: #111;
    text-align: center;
    margin-bottom: rem(40);
}

.contactUs {
    padding: rem(70) 0;
}

.list-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: rem(20);
}

.list-item {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 42px;
    width: 100%;
    height: rem(105);
    background: rgb(255, 255, 255);
    box-shadow: rgba(180, 180, 180, 0.1) 0px 10px 35px 10px;
    border-radius: 10px;
    gap: rem(25);
}

.box-left {
    width: rem(60);
    height: rem(60);

    img {
        width: 100%;
        height: 100%;
    }
}

.contact-title {
    font-size: rem(14);
    color: #000;
}

.contact-desc {
    font-size: rem(12);
    color: rgb(135, 135, 135);
    margin-top: rem(5);
}
</style>